<template name="index">
	<view class="container"  >
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-deepBlue cur':''" v-for="(item,index) in typesList" :key="index" @tap="tabSelect" :data-id="index">
					{{item.typeName}}
				</view>
			</view>
		</scroll-view>
		
		<view v-for="(item,index) in goodsList" :key="index">
			<view class="cu-card case">
				<view class="cu-item shadow">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" dots-styles="dotStyle"
						:duration="duration">
						<swiper-item v-for="(img,index) in item.medials" :key="index">
							<image v-if="img.type == 'img'" :src="img.urls" mode="aspectFit" style="height: 100%;"></image>
							<video v-if="img.type == 'vio'" :src="img.urls" ></video>
						</swiper-item>
					</swiper>
					
					
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="content flex-sub"  style="left: 20px;">
								<view class="text-black" style="font-size: 25px;">{{item.goodsName}}</view>
								<view class="text-red text-ssm flex justify-between price">￥{{item.price}}</view>
								<view class="text-black">{{item.descs}}</view>
							</view>
						</view>
						<view class="cu-item" style="height: 40px;">
							<view class="button" @click="changeDescsStatus(index)">案例</view>
							<view class="button" @click="changeCommentStatus(index)">评论</view>
						</view>
						<view class="cu-item" style="height: 40px;" v-if="isLogin">
							<view class="button" @click="updateGoods(item.id)">修改产品</view>
							<view class="button" @click="deleteGoods(item.id)">删除产品</view>
						</view>
						<view class="cu-item" style="height: 150px;" v-if="item.showComments">
							<view class="content flex-sub"  style="left: 20px;">
								<view>评论列表</view>
									<view v-for="(commentItem,index) in item.comments" :key="index" class="text-gray text-ssm flex justify-between">
										<view style="height:40px;line-height: 40px;">{{commentItem.comments}}</view>
										<view class="button" style="float: left;"  v-if="isLogin" @click="deleteComment(commentItem.id)">删除评论</view>
									</view>
								<view>
									<textarea style="border: 1px solid black;height: 50px;width: 100%;" v-model="item.subComment" placeholder="请输入你评价!"></textarea>
								</view>
								<!-- <view class="commentButtom" @click="submitComment(item.id,item.subComment)">
									发表评论
								</view> -->
								<view class="padding flex flex-direction">
									<button style="background-color: #38628E;border-radius: 30px;height: 40px;line-height: 40px;" class="send-btn" type="primary"
										@click="submitCmt">添&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加</button>
								</view>
							</view>
						</view>
						
						<view class="cu-item" style="height: 150px;" v-if="item.showCases"  v-for="(caseItem,index) in item.cases" :key="index">
							<view class="content flex-sub"  style="left: 20px;width: calc(100% - 40px );">
								<view>
									<image v-for="(caseImg,index) in caseItem.caseImgs" :key="index" :src="caseImg" class="descImg" />
								</view>
								<view class="text-gray text-ssm flex justify-between">{{caseItem.descs}}</view>
								<view style="height: 40px;"  v-if="isLogin">
									<view class="button" style="float: left;" @click="updateCases(caseItem.id)">修改案例</view>
									<view class="button" style="float: left;" @click="deleteCases(caseItem.id)">删除案例</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 40px;"></view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: "index",
		components: {
			
		},
		data() { 
			return {
				productList: [],
				params:null,
				type:"wholesale",
				startComment: false,
				startShow: false,
				goodsList:[],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				profit: "http://localhost/dev-api",
				commentList:[],
				TabCur: 0,
				typesList:[],
				isLogin:false
			};
		},
		mounted(){
			document.querySelector('.uni-page-head-hd').style.display = 'none'
		},
		onLoad() {
			
		},
		created() {
			this.getTypeList();
			if(uni.getStorageSync("token")){
				this.isLogin = true;
			}else{
				this.isLogin = false;
			}
			// this.getGoodsList();
			// this.getCommentList();
			// this.getProductList();
		},
		mounted() {
			
		},
		methods: {
			submitComment(goodsId,comment){
				if (this.disabled || this.loading) {
					return
				}
				this.disabled = true
				this.loading = true
				this.fetch.request("/comment", "POST", {
					goodsId: goodsId,
					comments: comment,
				}, false, true, false, this)
				.then((res) => {
					this.disabled = false
					this.loading = false
					this.fetch.toast(res.msg, "", res.code == 0)
				}).catch(() => {
					this.disabled = false
					this.loading = false
				})
			},
			getTypeList(){
				this.fetch.request('/type/listAll', 'POST', {
					shopId:uni.getStorageSync("shopId")
				},
				 false, true, false).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.typesList = res.data;
						this.getGoodsList();
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
							}
						});
					}
				}).catch(error => {
					console.log(error)
				})
			},
			getGoodsList(){
				this.fetch.request('/goods/listAll', 'POST', {
					shopId:uni.getStorageSync("shopId"),
					caseTypeId:this.typesList[this.TabCur].id
				},
				 false, true, false).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.goodsList = res.data;
						for(let i = 0; i < this.goodsList.length; i++){
							let goods = this.goodsList[i];
							
							let medias = []
							if(null != goods.imgs && "" != goods.imgs && goods.imgs != undefined){
								let imgUrls = goods.imgs.split(",");
								for(let j = 0; j < imgUrls.length; j++){
									let dataImg = {
										type: "img",
										urls: imgUrls[j]
									}
									medias.push(dataImg);
								}
							}
							if(null != goods.video && "" != goods.video && goods.video != undefined){
								let dataImg = {
									type: "vio",
									urls: goods.video
								}
								medias.push(dataImg);
							}
							goods.medials = medias;
							goods.showCases = false;
							goods.showComments = false;
							goods.subComment = "";
							this.goodsList[i] = goods;
						}
						console.log("this.goodsList",this.goodsList)
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
							}
						});
					}
				}).catch(error => {
					console.log(error)
				})
			},
			changeCommentStatus(index){
				this.goodsList[index].showComments = !this.goodsList[index].showComments;
				this.fetch.request('/comment/getByGoodsId', 'post', {
					"goodsId": this.goodsList[index].id
				},
				 false, true, false).then(res => {
					if (res.code == 200) {
						let comments = res.data
						this.goodsList[index].comments = comments;
						this.$forceUpdate()
						console.log("this.goodsList[index]",this.goodsList[index]);
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
							}
						});
					}
				}).catch(error => {
					console.log(error)
				})
			},
			changeDescsStatus(index){
				this.goodsList[index].showCases = !this.goodsList[index].showCases;
				this.fetch.request('/case/getByGoodsId', 'post', {
					"goodsId": this.goodsList[index].id
				},
				 false, true, false).then(res => {
					if (res.code == 200) {
						let cases = res.data
						for(let i = 0; i < cases.length; i++){
							if(null != cases[i].imgs && "" != cases[i].imgs && cases[i].imgs != undefined){
								cases[i].caseImgs = cases[i].imgs.split(",");
							}
						}
						this.goodsList[index].cases = cases;
						this.$forceUpdate()
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
							}
						});
					}
				}).catch(error => {
					console.log(error)
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.goodsList = [];
				this.getGoodsList();
			},
			updateGoods(id){
				uni.navigateTo({
					url:"../person/addGoods?id="+id
				})
			},
			deleteGoods(id){
				this.fetch.request('/goods/remove/'+id, 'get', null,
				 false, true, false).then(res => {
					if (res.code == 200) {
						this.getGoodsList();
						this.$forceUpdate();
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
							}
						});
					}
				}).catch(error => {
					console.log(error)
				})
			},
			updateCases(id){
				uni.navigateTo({
					url:"../person/addCase?id="+id
				})
			},
			deleteCase(id){
				this.fetch.request('/case/remove/'+id, 'get', null,
				 false, true, false).then(res => {
					if (res.code == 200) {
						this.getGoodsList();
						this.$forceUpdate();
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
							}
						});
					}
				}).catch(error => {
					console.log(error)
				})
			},
			deleteComment(id){
				this.fetch.request('/case/comment/'+id, 'get', null,
				 false, true, false).then(res => {
					if (res.code == 200) {
						this.getGoodsList();
						this.$forceUpdate();
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
							}
						});
					}
				}).catch(error => {
					console.log(error)
				})
			},
			
		}
	}
</script>

<style>
	.price{
		color: #fa436a;
	}
	.uni-video{
		width: 100%;
	}
	.container {
	}
	.swiper-bg-top {
		height: 280rpx;
		width: 100%;
	}
	.swiper-box{
		height: 420rpx;
		width: 100%;
		position: absolute;
		top: 10rpx;
		left: 0;
		right: 0;
	}
	.swiper-bg-bottom {
		height: 135rpx;
		width: 100%;
	}
	.content-box{
		width: 100%;
		line-height: 1.6em;
	}
	.tui-nodata-box image {
		margin-bottom: 20rpx;
	}
	.button{
		width: 49%;
		height: 100%;
		text-align: center;
		line-height: 40px;
	}
	.commentButtom{
		text-align: center;
		height: 30px;
		line-height: 30px;
		background-color: lightblue;
	}
	.descImg{
		width: 33%;
		height: 80px;
	}
	.dotStyle{
		backgroundColor: 'rgba(0, 0, 0, .3)';
		border: '1px rgba(0, 0, 0, .3) solid';
		color: '#fff';
		selectedBackgroundColor: 'rgba(0, 0, 0, .9)';
		selectedBorder: '1px rgba(0, 0, 0, .9) solid';
	}
	.send-btn {
		width: 100%;
		border-radius: 6rpx;
	}
</style>
